<template>
  <wd-toast></wd-toast>
  <view class="login">
    <view class="login-main">
      <text class="login-main-title">你好,</text>
      <view class="login-main-subtitle">欢迎进入小田模版</view>
      <view class="login-main-body">
        <wd-input type="text" v-model="username" clearable placeholder="请输入手机号码" :maxlength="20"></wd-input>
        <view class="login-password">
          <wd-input type="text" v-model="password" show-password clearable placeholder="请输入密码" :maxlength="20"></wd-input>
        </view>
        <wd-button size="large" class="submit-btn" block type="primary" :disabled="disabled" @click="hendleDoLogin">登录</wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { md5 } from 'js-md5'
import DemoApi from '@/api/DemoApi'
import { ref, computed } from 'vue'
const baseURL = import.meta.env.VITE_BASEURL
import { useToast } from 'wot-design-uni/components/wd-toast'
const isAgree = ref<boolean>(false)
// const username = ref<string>('15853723521')
// const password = ref<string>('123456')
// const code = ref<string>('123123')

const username = ref<string>('15753823552')
const password = ref<string>('123456')
const code = ref<string>('')

// const username = ref<string>('18382322997')
// const password = ref<string>('150231')
const toast = useToast()
const { userInfo } = storeToRefs(useAuthStore()) // 解构pinia的store
const router = useRouter() // 路由
const codeImgUrl = ref('')
// 登录按钮是否禁用
const disabled = computed(() => {
  return !username.value || !password.value
})

const hendleDoLogin = async () => {
  try {
    toast.loading({ loadingType: 'ring', msg: '登录中' })
    const params = {
      mobile: username.value,
      password: password.value,
    }
    uniCloud.callFunction({
      name: 'commonLogin',
      data: {
        ...params
      }
    }).then((res) => {
      console.log(res)
      console.log(res.result)
      const {code,data,msg} = res.result
      const { avatar, token, mobile, gender, nickname,_id } = data
      userInfo.value = {
        avatar,
        token,
        mobile,
        gender,
        nickname,
        _id
      } as any
      toast.close()
      if(code == 200){
        toast.success(msg)
        setTimeout(async () => {
          router.replaceAll({ name: 'home' })
        }, 1000)
      }else{
        toast.error(msg)
      }

      //

    }).catch((err) => {
      console.log(err)
    })



  } catch (error) {
    toast.close()
  }
}

const getCodeImg = async () => {
  uni.request({
    url: baseURL + '/cityAdmin/mall/open/img_code',
    method: 'GET',
    header: {
      isToken: false
    },
    timeout: 20000,
    responseType: 'arraybuffer',
    success: async (res) => {
      codeImgUrl.value = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data)
    }
  })
}
const openUserPage = (id) => {
  uni.navigateTo({
    url: `/pagesA/common/Agreement?objId=${id}`
  })
}
onLoad(() => {
  getCodeImg()
})
</script>

<style lang="scss" scoped>
.login {
  font-family: PingFangSC-Regular, PingFang SC;
  background-color: #ffffff;
  height: calc(100vh - var(--window-top));
  width: 100vw;
  box-sizing: border-box;

  &-main {
    padding: 112rpx 75rpx 0 75rpx;
    position: relative;

    &-title {
      display: flex;
      align-items: center;
      height: 64rpx;
      font-size: 64rpx;
      font-weight: 600;
      // color: $color-text-secondary;
      line-height: 64rpx;
      letter-spacing: 8rpx;
    }

    &-subtitle {
      font-size: 28rpx;
      color: #303030;
      font-weight: bold;
      // color: $color-text-thirdly;
      line-height: 40rpx;
      margin: 15rpx 0 104rpx;
    }

    &-body {
      position: relative;
      box-sizing: border-box;
      width: 600rpx;
      height: 648rpx;

      .login-password {
        position: relative;
        padding: 40rpx 0 104rpx;
      }

      .submit-btn {
        border-radius: 0 !important;
        background: red !important;
      }

      .regUser {
        margin-top: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 26rpx;
        font-weight: 600;
        color: #406afd;
      }

      .addMer {
        margin-top: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-weight: 600;
        color: #406afd;
      }
    }
  }

}

.popup-box {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx 32rpx 0 32rpx;
  flex-direction: column;

  .popup-title {
    font-weight: bold;
    font-size: 32rpx;
    padding-top: 20rpx;
  }

  .popup-const {
    margin-top: 30rpx;
    font-size: 24rpx;
  }

  .btn-box {
    width: 100%;
    margin-top: 50rpx;
    border-top: 2rpx solid #eee;

    .btn {
      padding: 32rpx 0;
      width: 50%;
      text-align: center;
    }

    .yes {
      color: red;
    }
  }
}

.login-code {
  padding-top: 40rpx;
  display: flex;
  justify-content: space-between;

  .code-inp {
  }

  .qrcodeImg {
    height: 80rpx;
    width: 220rpx;
    margin-left: 20rpx;
  }
}
.common-text{
	color: red !important;
}
</style>
